 <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                远程设备管理
                <small>控制远程多种设备的开关并监控
                </small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-gears"></i> 设备管理</a></li>
                <li>远程设备开关</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">远程列表 </h3>
                            <a class="btn btn-warning btn-flat pull-right" (click)="editAllDevice('open',$event)">一键开启</a>
                            <a class="btn btn-primary btn-flat pull-right" style="margin-right: 10px" (click)="editAllDevice('close',$event)">一键关闭</a>
                            <button type="button" class="btn btn-success btn-xs col">开启</button>当前设备离线&nbsp;
                            <button type="button" class="btn btn-success btn-xs col">关闭</button>当前设备在线&nbsp;
                            <button type="button" class="btn btn-danger btn-xs col">异常</button>当前设备异常&nbsp;
                            <br/><br/>不可点击状态
                            <button type="button" class="btn btn-success btn-xs col" disabled>开启</button>&nbsp;
                            <button type="button" class="btn btn-success btn-xs col" disabled>关闭</button>&nbsp;
                            <button type="button" class="btn btn-danger btn-xs col" disabled>异常</button>&nbsp;
                            当树莓派关闭或异常，所有操作无法进行

                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example2" class="table table-bordered table-hover" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
                                <thead>
                                <tr>
                                    <th><mfDefaultSorter by="id">编号</mfDefaultSorter></th>
                                    <th><mfDefaultSorter by="buildingNum">教室</mfDefaultSorter></th>
                                    <th>电脑</th>
                                    <th>摄像头</th>
                                    <th>投影仪</th>
                                    <th>树莓派</th>                                    
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let device of mf.data;let j = index" [ngClass]="{'device-disabled':device.raspberryStatus!=1}">
                                        <td>
                                            <div class="checkbox">
                                                <label>
                                                    <input [disabled]="device.raspberryStatus!=1" type="checkbox" class="device-checkbox"> {{device.id}}
                                                </label>
                                            </div>
                                        </td>
                                        <td>{{device.buildingNum}} {{device.classroomNum}}</td>
                                        <td>
                                            <button [disabled]="device.raspberryStatus!=1" *ngIf="device.computerStatus==0" type="button" class="btn btn-success btn-xs col" (click)="operateDevice(j,device.id,'computer','open',$event)">开启</button>
                                            <button [disabled]="device.raspberryStatus!=1" *ngIf="device.computerStatus==1" type="button" class="btn btn-success btn-xs col" (click)="operateDevice(j,device.id,'computer','close',$event)">关闭</button>
                                            <button [disabled]="device.raspberryStatus!=1" *ngIf="device.computerStatus==2" type="button" class="btn btn-danger btn-xs col" (click)="operateDevice(j,device.id,'computer','open',$event)">异常</button>
                                        </td>
                                        <td>
                                            <span *ngFor="let camera of device.cameraList ; let i = index">
                                                {{camera.cameraAngle}}:
                                                <button [disabled]="device.raspberryStatus!=1" *ngIf="camera.cameraStatus==0" type="button" class="btn btn-success btn-xs col" (click)="operateCamera(device.id,camera.cameraId,i,'open')">开启</button>
                                                <button [disabled]="device.raspberryStatus!=1" *ngIf="camera.cameraStatus==1" type="button" class="btn btn-success btn-xs col" (click)="operateCamera(device.id,camera.cameraId,i,'close',$event)">关闭</button>
                                                <button [disabled]="device.raspberryStatus!=1" *ngIf="camera.cameraStatus==2" type="button" class="btn btn-danger btn-xs col" (click)="operateCamera(device.id,camera.cameraId,i,'open',$event)">异常</button>
                                            </span>
                                        </td>
                                        <td>
                                            <button [disabled]="device.raspberryStatus!=1" *ngIf="device.projectorStatus==0" type="button" class="btn btn-success btn-xs col" (click)="operateDevice(j,device.id,'projector','open',$event)">开启</button>
                                            <button [disabled]="device.raspberryStatus!=1" *ngIf="device.projectorStatus==1" type="button" class="btn btn-success btn-xs col" (click)="operateDevice(j,device.id,'projector','close',$event)">关闭</button>
                                           <button [disabled]="device.raspberryStatus!=1" *ngIf="device.projectorStatus==2" type="button" class="btn btn-danger btn-xs col" (click)="operateDevice(j,device.id,'projector','open',$event)">异常</button>
                                        </td>
                                        <td>
                                            <p *ngIf="device.raspberryStatus==0" >离线</p>
                                            <p *ngIf="device.raspberryStatus==1" >在线</p>
                                            <p *ngIf="device.raspberryStatus==2" >异常</p>
                                        </td>
                                        <td>
                                            <button [disabled]="device.raspberryStatus!=1" type="button" class="btn btn-success btn-xs col" (click)="operateDevice(j,device.id,'','open',$event)">开启全部</button>&nbsp;
                                            <button [disabled]="device.raspberryStatus!=1" type="button" class="btn btn-success btn-xs col" (click)="operateDevice(j,device.id,'','close',$event)">关闭全部</button>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="7">
                                            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

